<!-- 各种图形绘制 -->
<template>
  <div id="echarts"></div>
</template>

<script>
import { Chart } from '@antv/g2'
import { Data } from './zhexianData'
export default {
  name: 'antvG2',
  data () {
    return {
      data: Data()
    }
  },
  computed: {
  },
  watch: {
  },
  mounted () {
    this.init(Data())
  },
  methods: {
    init: function (data) {
      console.log(data)
      const colors = ['#FAD527','#5DBF4D','#FF0000']
      // 1、创建图标实例
      const chart = new Chart({
        container: `echarts`,
        autoFit: true,
        height: 400
      })
      // 2、载入数据
      chart.data(data)
      // 列定义项
      chart.scale({
        inx: {
          // range: [0, 1],
          // inx值的中文展示，配合axis使用
          alias: 'X轴',
          sync: true,
          nice: true
        },
        num: {
          alias: 'Y轴',
          formatter: (value) => {
            return value
          },
          min: 0,
          sync: true,
          nice: true
        }
      })

      chart.axis('num', { title: {}, grid: {alignTick: false} })
      chart.axis('inx', { title: {} })
      // 展示框内容调整
      chart.tooltip({
        showCrosshairs: true,
        // 辅助线样式
        crosshairs: {
          line: {
            style: {
              stroke: "#D9D9D9",
              lineDash: [2, 3, 4]
            },
          },
        },
        showTitle: false,
        shared: true,
        // 指定显示模板
        itemTpl: `<li class="g2-tooltip-list-item">
          <span style="background-color:{color};" class="g2-tooltip-marker"></span>
          <span class="g2-tooltip-name">{name}</span>：<span class="g2-tooltip-value">{value}</span>
        </li>`,
        // 模板样式
        domStyles: {
          'g2-tooltip': {
            background: 'rgba(0,0,0,.5)',
          },
          'g2-tooltip-list-item': {
            color: '#ffffff'
          }
        }
      })

      // 3、绘制折线图
      chart.line()
          .adjust()
          .position('inx*num')
          .label("num", { // 折线上的数字
            layout: {
              type: "fixed-overlap",
            },
            offset: 0,
            style: {
              fill: "black",
              stroke: "#fff",
              lineWidth: 2,
            },
          })
          .color('type', colors)
      // 点图
      chart.point()
          .adjust()
          .position('inx*num')
          .color('type', colors)
          .shape('circle')
      // 不显示图例
      chart.legend('type', false)
      // 域图
      /* chart.area()
          .adjust()
          .position('inx*num')
          .color('type', colors) */
      // 4、渲染
      chart.render()
    }
  }
}
</script>
<style scoped>
div{
  margin: 0 auto 50px;
}
</style>
